<template>
    <div>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" :style="w100">
                    <el-table-column
                            label="序号"
                            type="index"
                            align="center"
                    >

                    </el-table-column>
                    <el-table-column
                            label="角色名称"
                            align="right"
                    >
                        <template slot-scope="scope">
                            <span>{{ scope.row.rolename }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-button
                                    @click="handleResInfo"
                                    type="primary"
                                    size="small"
                            >
                                <i class="el-icon-edit"></i>
                                资源信息
                            </el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row class="mt-40 tr">
            <el-col :span="24">
                <el-pagination
                        @current-change="handleCurrentChange"
                        :page-sizes="[5,10]"
                        :page-size="10"
                        :current-page="pages.curPage"
                        :total="pages.totalCount"
                        layout="total, sizes, prev, pager, next, jumper"
                >

                </el-pagination>
           </el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
  import { Vue, Component } from "vue-property-decorator";
  import { Pages } from "@/interface/interface";
  import { queryauthorize } from "@/api/api";

  @Component({})
  export default class RolesAndResManage
    extends Vue {
    private name!: "RolesAndResManage";
    private tableData: any[]=[];
    private w100 = {
      w100: "100%"
    };
    private pages:Pages={
      totalCount:1,
      curPage:1,
      pageNum:1,
    }
    private created(){
      this.handleQuery(1)
    }
    /*分页*/
   private handleCurrentChange(val: number){
      this.handleQuery(val)
    }
    /*查询*/
    private async handleQuery(pageNum:number){
      const res=await queryauthorize({pageNum});
      if(res){
        const {success,message,object}=res;
        if(success){
          const {datas,...pages}=object;
          this.tableData=datas;
          this.pages=pages;
          this.$message({
            type:'success',
            message:'数据更新成功',
          })
        }else{
          this.$message({
            type:'error',
            message:'数据出错'
          })
        }
      }else{
        this.$notify({
          title:'error',
          message:'数据出错'
        })
      }
    };
    private handleResInfo(){

    }

  }
</script>

<style lang="scss" scoped>

</style>
